<script setup lang="ts">
	import {
		Document,
		Menu as IconMenu,
		Location,
		Setting,
	} from '@element-plus/icons-vue'

import * as echarts from 'echarts';

import { RouterLink, RouterView,useRoute } from 'vue-router'


	const handleOpen = () => {
		
		// console.log(key, keyPath)
	}
	const handleClose = () => {
		// console.log(key, keyPath)
	}
	// 定义包含登录
	const login = ['/']
	const log = useRoute()
	console.log(location)
	// v-if='login.indexOf(log.path)'
</script>

<template>
	<div class="hend" >
		<div class="imgg">
		<img src="../img/logo.png" alt="logo"  />
		<h2>Acop 后台管理</h2>
		</div>
		 <div class="flex items-center">
		  <!-- <div class="">.aiemn</div> -->
				<el-avatar
				  :size="32"
				  class="mr-3"
				  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
				/>
		      </div>
			  
			        <div class="flex items-center ">
			          <el-button class="zzz">编辑</el-button>
			          <el-button type="primary" class="ml-2">退出</el-button>
			        </div>
			    
	</div>
	<el-row class="tac">
		<el-col :span="4">
			
			<el-menu default-active="currentRoute" class="el-menu-vertical-demo"  @open="handleOpen" @close="handleClose"  unique-opened :router='true'>
				
				<el-sub-menu index="1">
					<template #title>
						<el-icon></el-icon>
						<span>登录</span>
					</template>
					<el-menu-item  index="1-1" route="/" style="color: gray; padding-left: 60px;">登录</el-menu-item>
				</el-sub-menu>
				
				<el-sub-menu index="2" >
					<template #title>
						<el-icon style="color: ;"><View /></el-icon>
						<span>看板</span>
					</template>
					<!-- 工作台  -->
					<el-menu-item index="/home" route="/home" style=" padding-left: 60px;">工作台</el-menu-item>
					<!-- 客户分析页 AboutView -->
					<el-menu-item index="/about" route="/about" style=" padding-left: 60px;">客户分析页</el-menu-item>
					<!-- 商品分析页 AnalysisView -->
					<el-menu-item index="/analysis" route="/analysis" style="padding-left: 60px;">商品分析页</el-menu-item>
				</el-sub-menu>
				
				<!-- 订单 -->
				<el-sub-menu index="3">
					<template #title>
						<el-icon><Tickets /></el-icon>
						<span>订单</span>
					</template>
				<!-- 订单 OrderView -->
				<el-menu-item index="/order" route="/order" style="padding-left: 60px;">订单</el-menu-item>
	
				</el-sub-menu>

				
				
				
				<!-- 服务管理 -->
				<el-sub-menu index="4">
					<template #title>
						<el-icon><Service /></el-icon>
						<span>服务管理</span>
					</template>
					
					<!-- 服务商信息 ServiceView-->
					<el-menu-item index="/service" route="/service" style=" padding-left: 60px;">服务商信息</el-menu-item>
					<!-- 客户信息 CustomerView-->
					<el-menu-item index="/customer" route="/customer" style="padding-left: 60px;">客户信息</el-menu-item>
				</el-sub-menu>
				
				<!-- 商品管理 -->
				<el-sub-menu index="5">
					<template #title>
						<el-icon><MessageBox /></el-icon>
						<span>商品管理</span>
					</template>
					
					<!-- 在售信息  SellView-->
					<el-menu-item index="/sell" route="/sell" style=" padding-left: 60px;">在售信息</el-menu-item>
					<!-- 商品入库  ListView-->
					<el-menu-item index="/list" route="/list" style=" padding-left: 60px;">商品入库</el-menu-item>
					<!-- 商品出售信息  ListtowView-->
					<el-menu-item index="/listtow" route="/listtow" style="padding-left: 60px;">商品出售信息</el-menu-item>
				</el-sub-menu>
				
				<!-- 消息 -->
				<el-sub-menu index="6">
					<template #title>
						<el-icon><ChatRound /></el-icon>
						<span>消息</span>
					</template>
					
					<!-- 售后服务  MessageView-->
					<el-menu-item index="/message" route="/message" style="padding-left: 60px;">售后服务</el-menu-item>
					<!-- 邮件 EmailView -->
					<el-menu-item index="/email" route="/email" style=" padding-left: 60px;">邮件</el-menu-item>
				</el-sub-menu>
				
				<!-- 个人中心 -->
				<el-sub-menu index="7">
					<template #title>
						<el-icon><User /></el-icon>
						<span>个人中心</span>
					</template>
					
					<!-- 用户信息  UserView-->
					<el-menu-item index="/user" route="/user" style=" padding-left: 60px;">我的</el-menu-item>
					<!-- 设置  SettingsView-->
					
					<el-menu-item index="/settings" route="/settings" style=" padding-left: 60px;">设置</el-menu-item>
				</el-sub-menu>
			</el-menu>
			<el-main>
				<RouterView />
			</el-main>
		</el-col>

	</el-row>
</template>

<style>
	#app {
		margin: 0px;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0px;
	}

	body {
		display: block;
		place-items: start;
		overflow: hidden;
	}

	.hend {
		height: 60px;
		width: 100vw;
		box-shadow: 0 0 10px rgba(0, 0, 0, .2);
		border-bottom: 1px solid gainsboro;
	}
	.imgg{
		display: flex;
		width: 100vw;
	}
	.imgg h2{
		margin: 10px 0px 0px 20px;
	}
	.imgg>img {
		width: 34px;
		width: 34px;
		margin: 13px 0px 0px 30px;
	}
	.el-main{
		position: absolute;
		top: -10px;
		left: 220px;
		width: 100%;
		height: 100vh;
	}
	.flex{
		position: absolute;
		top: 10px;
		right: 200px;
	}
	.zzz{
		position: absolute;
		left:30px;
	}
	.ml-2{
	position: absolute;
	left: 100px;
	}
	
</style>